﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <link href="css/kendo/kendo.mobile.all.min.css" rel="stylesheet" />
    <script src="js/jquery-2.1.0.min.js"></script>
    <script src="js/kendo/kendo.mobile.min.js"></script>

    <script>
        var DBSystem = DBSystem || {};
    </script>
    <script src="js/main.js"></script>
    <script src="js/config.js"></script>
    <script src="js/productosList.js"></script>
    <script src="js/productosForm.js"></script>

    <script src="js/clientesList.js"></script>
    <script src="js/clientesForm.js"></script>

    <script src="js/catagoriasList.js"></script>
    <script src="js/categoriasForm.js"></script>

    <script src="js/clienteDetails.js"></script>

</head>
<body>


    <!--homeview-->
    <div id="homeView"
        data-role="view"
        data-title="Categorias"
        data-layout="mainLayout">
        <h1>Home</h1>

    </div>

    <!--categoriasview-->
    <div id="categoriasView"
        data-role="view"
        data-title="Categorias"
        data-layout="mainLayout"
        data-model="DBSystem.categoriasList.viewModel"
        data-show="DBSystem.categoriasList.onShow">
        <h1>Categorias</h1>

        <button data-role="button" data-icon="mostrecent" data-bind="click: registrar">Registrar</button>

        <ul id="listCategorias"
            data-role="listview"
            data-style="inset"
            data-template="categoriasListTemplate"
            data-bind="source: categoriasDataSource">
        </ul>
    </div>
    <script id="categoriasListTemplate" type="text/x-kendo-tmpl">
        Descripcion: ${data.descripcion}<br/>
    </script>

    <!--Registrar Categoria view-->
    <div id="registrarCategoriaView"
        data-role="view"
        data-title="Registrar Categoria"
        data-layout="mainLayout"
        data-model="DBSystem.categoriasForm.viewModel">
        <h3>Registro de Categoria</h3>

        <ul data-role="listview">
            <li>
                <label>
                    Descripcion:
                            <input id="txtDescripcion" type="text" placeholder="Descripcion"
                                data-bind="value: categoria.descripcion" />
                </label>
            </li>

            <li>
                <label>
                    Comentario:
                            <input id="txtComentario" type="text" placeholder="Comentario.."
                                data-bind="value: categoria.comentario " />
                </label>
            </li>

            <li>
                <button data-role="button" data-icon="add" data-bind="click: registrar ">Guardar</button>
                <button data-role="button" data-icon="reply" data-bind="click: cancelar">Cancelar</button>
            </li>


        </ul>


    </div>


    <!-- productosView-->
    <div id="productosView"
        data-role="view"
        data-title="Productos"
        data-layout="mainLayout"
        data-model="DBSystem.productosList.viewModel"
        data-show="DBSystem.productosList.onShow">
        <h1>Productos</h1>

        <input type="text" id="txtCriterio" data-bind="value: criterio" />
        <button data-role="button" data-icon="search" data-bind="click: buscar">Buscar</button>

        <button data-role="button" data-icon="mostrecent" data-bind="click: registrar">Registrar</button>

        <ul id="listProductos"
            data-role="listview"
            data-style="inset"
            data-template="productosListTemplate"
            data-bind="source: productosDataSource">
        </ul>

    </div>
    <script id="productosListTemplate" type="text/x-kendo-tpml">
            
        # var url = '\\#detailsProductView' #

        Codigo: ${data.Codigo}<br/>
            ${data.Descripcion}
        <a href="${url}" data-role="detailbutton" 
        data-style=contactadd  data-bind="click: onSelectProducto"></a>
    </script>

    <!--detailsProductView-->
    <div id="detailsProductView"
        data-role="view"
        data-title="Detalles de Producto"
        data-layout="mainLayout"
        data-model="DBSystem.productosList.viewModel">
        <h1>Detalles del Producto</h1>

        <ul data-role="listview">
            <li>Código: <span data-bind="text: selectedProducto.Codigo"></span></li>
            <li><span data-bind="text: selectedProducto.Descripcion"></span></li>
            <li>Precio: <span data-bind="text: selectedProducto.Precio"></span></li>
            <li>Stock: <span data-bind="text: selectedProducto.Stock"></span></li>
            <li>Descontinuado: <span data-bind="text: selectedProducto.Descontinuado?'SI':'NO'"></span></li>
        </ul>

    </div>

    <!--Registrar Producto view-->
    <div id="registrarProductoView"
        data-role="view"
        data-title="Registrar Producto"
        data-layout="mainLayout"
        data-model="DBSystem.productosForm.viewModel">
        <h3>Registro de Producto</h3>

        <ul data-role="listview">
            <li>
                <label>
                    CategoriaId:
                            <input id="txtCategoriaId" type="number"
                                data-bind="value: producto.CategoriaId" />
                </label>
            </li>
            <li>
                <label>
                    Codigo:
                            <input id="txtCodigo" type="text" placeholder="Codigo.."
                                data-bind="value: producto.Codigo " />
                </label>
            </li>
            <li>
                <label>
                    Descripcion:
                            <input id="txtDescripcionPro" type="text" placeholder="Descripcion.."
                                data-bind="value: producto.Descripcion " />
                </label>
            </li>
            <li>
                <label>
                    Descontinuado:
                            <input id="cbDiscontinuado" type="checkbox" name="Descontinuado" value="true"
                                data-bind="checked: producto.Descontinuado " />
                </label>
            </li>
            <li>
                <label>
                    Precio:
                            <input data-bind="value: producto.Precio" />
                </label>
            </li>
            <li>
                <label>
                    Stock:
                            <input id="txtStock" type="number" data-format="c"
                                data-bind="value: producto.Stock " />
                </label>
            </li>

            <li>
                <button data-role="button" data-icon="add" data-bind="click: registrar ">Guardar</button>
                <button data-role="button" data-icon="reply" data-bind="click: cancelar">Cancelar</button>
            </li>


        </ul>

    </div>


    <!-- clientesView-->
    <div id="clientesView"
        data-role="view"
        data-title="Clientes"
        data-layout="mainLayout"
        data-model="DBSystem.clientesList.viewModel"
        data-show="DBSystem.clientesList.onShow">
        <h1>Clientes</h1>

        <input type="text" id="Text1" data-bind="value: criterio" />
        <button data-role="button" data-icon="search" data-bind="click: buscar">Buscar</button>

        <button data-role="button" data-icon="mostrecent" data-bind="click: registrar">Registrar</button>

        <ul id="listClientes"
            data-role="listview"
            data-style="inset"
            data-template="clientesListTemplate"
            data-bind="source: clientesDataSource">
        </ul>


    </div>
    <script id="clientesListTemplate" type="text/x-kendo-tpml">
            # var url = '\\#detalleClienteView?idCliente=' + data.id #
            <a href="${url}">

            Ruc/Dni: ${data.rucDni}<br/>
            ${data.razonSocial}
            </a>
    </script>

    <!--detalleClienteView-->
    <div id="detalleClienteView"
        data-role="view"
        data-title="Detalle del Cliente"
        data-layout="mainLayout"
        data-model="DBSystem.clienteDetails.viewModel"
        data-show="DBSystem.clienteDetails.onShow">
        
        <ul data-role="listview">
            <li>Ruc/DNI: <h3 data-bind="text: cliente.rucDni""></h3></li> 
            
            <li>Razon Social: <h3 data-bind="text: cliente.razonSocial"></h3></li>
            
            <li>Dirección: <h3 data-bind="text: cliente.direccion"></h3></li>
            
        </ul>

    </div>



    <!--Registrar Cliente view-->
    <div id="registrarClienteView"
        data-role="view"
        data-title="Registrar Cliente"
        data-layout="mainLayout"
        data-model="DBSystem.clientesForm.viewModel">
        <h3>Registro de Cliente</h3>

        <ul data-role="listview">

            <li>
                <label>
                    Ruc/Dni:
                            <input id="txtrucDni" type="text" placeholder="rucDni.."
                                data-bind="value: cliente.rucDni " />
                </label>
            </li>
            <li>
                <label>
                    Razón Social:
                            <input id="txtrazonSocial" type="text" placeholder="razonSocial.."
                                data-bind="value: cliente.razonSocial " />
                </label>
            </li>
            <li>
                <label>
                    Direccion:
                            <input id="txtdireccion" type="text" placeholder="direccion.."
                                data-bind="value: cliente.direccion " />
                </label>
            </li>

            <li>
                <button data-role="button" data-icon="add" data-bind="click: registrar ">Guardar</button>
                <button data-role="button" data-icon="reply" data-bind="click: cancelar">Cancelar</button>
            </li>


        </ul>

    </div>



    <div data-role="layout" data-id="mainLayout">
        <div data-role="header">
            <div data-role="navbar">
                <span data-role="view-title"></span>
            </div>
        </div>
        <div data-role="footer">
            <div data-role="tabstrip">
                <a href="#homeView" data-icon="home">Home</a>
                <a href="#categoriasView" data-icon="organize">Categorias</a>
                <a href="#productosView" data-icon="cart">Productos</a>
                <a href="#clientesView" data-icon="contacts">Clientes</a>
            </div>
        </div>
    </div>

    <script>
        //var app = new kendo.mobile.Application(document.body, {
        //    transition:'slide'
        //});

        DBSystem.main.initApp();
    </script>
</body>
</html>
